<html>
<style type="text/css" id="__ntheming_global">
html {
	background-color: black;
	color: white;
}
</style>
<style type="text/css" id="__ntheming_global_font">
html {
	font-family: sans-serif;
}
</style>
<head>
<title>nTube: Check My Browser</title>
<a href="/" style="font-size: x-large;text-decoration: none;"><span style="color: red;">n</span><span style="color: lightgreen;">Tube</span></a>
<h3>Check my browser</h3>
</head>
<body>
	<div>
		<div style="border: 1px solid green;">
			<p style="display: inline;padding-left: 5px;">JavaScript supported?</p>		
			<p style="color: red;display: inline;float: right;padding-right: 5px;" id="_checkjs">NO</p>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">This is required for any basic functionality of nTube.</p>
		</div>	
		<div style="border: 1px solid green;">
			<p style="display: inline;padding-left: 5px;">Requests supported?</p>		
			<p style="color: red;display: inline;float: right;padding-right: 5px;" id="_checkwebr">NO</p>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">This is required for any basic functionality of nTube.</p>
		</div>	
		<div style="border: 1px solid green;">
			<p style="display: inline;padding-left: 5px;">Video Types Supported</p>		
			<center>
				<table summary="" >
					<tr>
						<th style="border-bottom: 1px solid green;">Media Type</th>
						<th style="border-bottom: 1px solid green;">Supported</th>				
					</tr>
					<tr>
						<td>MP4 (MPEG4)</td>
						<td align="center" id="_check_media_mp4" style="color: red;">NO</td>				
					</tr>
					<tr>
						<td>WebM</td>
						<td align="center" id="_check_media_webm" style="color: red;">NO</td>				
					</tr>
					<tr>
						<td>AV1</td>
						<td align="center" id="_check_media_av1" style="color: red;">NO</td>				
					</tr>
				</table>			
			</center>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">nTV and YouTube streaming requires MPEG4 support.</p>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">This is required for any playback.</p>
		</div>	
		<div style="border: 1px solid green;">
			<p style="display: inline;padding-left: 5px;">Is nPlayer supported?</p>		
			<p style="color: red;display: inline;float: right;padding-right: 5px;" id="_checknplayer">NO</p>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">This is required for nPlayer (i.e. 60FPS). This doesn't work on mobile.</p>
		</div>
		<div style="border: 1px solid green;">	
			<p style="display: inline;padding-left: 5px;">nPlayer: Supported Features</p>		
			<center>
				<table summary="" >
					<tr>
						<th style="border-bottom: 1px solid green;">Feature</th>
						<th style="border-bottom: 1px solid green;">Supported</th>				
					</tr>
					<tr>
						<td>Native Background Media Playback</td>
						<td align="center" id="_check_player_back" style="color: red;">NO</td>				
					</tr>
					<tr>
						<td>Native Playback Sync</td>
						<td align="center" id="_check_player_mediacontroller" style="color: red;">NO</td>				
					</tr>
				</table>			
			</center>
			<p style="color: gray;line-height: 50%;padding-left: 5px;">None of these features are required, these simply enhance nPlayer's performance.</p>
		</div>	
	</div>
	<script src="/nplayer.js"></script>
	<script type="text/javascript" >
function send_request(url, data, onFail, onSuccess) {
	if (typeof fetch != "undefined") {
		fetch(url).then(function(response) {
    		return response.text();
   	}).then(function(json) {
   		onSuccess(json);
   	}).catch(function(ex) {
   		console.error(ex);
   		console.error("Exception URL: " + url);
    		onFail();
  		});	
	}else {
		console.warn("send_request() -> Outdated browser found, attempting fallback method...");
		var http = null;
		if (window.XMLHttpRequest) {
			http = new XMLHttpRequest();		
		}else {
			http = new ActiveXObject("Microsoft.XMLHTTP");
		}
		http.open('POST', url, true);
	   http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	   
	   var hasResponse = false;
	   //var res = "";
	   http.onreadystatechange = function() {
		if (http.readyState == 4 && http.status == 200) {
		//		res = http.responseText;
				var sp = http.responseText.split("\n");
				onSuccess(sp[sp.length - 1]);
			}
		}
		http.ontimeout = function() {
			alert("nTube: onTimeout() was called when fetching your video!");
		}
		http.send(params);
	}
	//var http = new XMLHttpRequest();
	//var params = data;
	//http.timeout = 0;
	//http.responseType = 'blob';
	//http.open('POST', url, true);
	//http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
			
	//var hasResponse = false;
	//var res = "";
	//http.onreadystatechange = function() {
	//	if (http.readyState == 4 && http.status == 200) {
	//		res = http.responseText;
	//		onSuccess(http.responseText);
	//	}
	//}
	//http.ontimeout = function() {
	//	alert("nTube: onTimeout() was called when fetching your video!");
	//}
	//http.send(params);
	
	/*		
	var stop = false;
	var time = 0;
	while (!hasResponse) {
		if (stop) {
			break;
		}
		if (time > 1500) {
			//alert("Timeout occured, try again.");
			onFail();
			stop = true;
		}
		var ix = -1;
		time += 1;
	}*/
}		
	
function b64DecodeUnicode(str) {
    try {
 		return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        	return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    	}).join(''));   	
    }catch (ex) {
    	return atob(str);	
    }
}
	
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}	

function canStoreData() {
	return typeof Storage == "function" || navigator.cookieEnabled;
}

function readSettings() {
	if (!canStoreData()) {
		return null;	
	}
	if (localStorage.getItem("_ntube_settings") != null) {
		return localStorage.getItem("_ntube_settings");
	}else {
		return getCookie("settings");
	}	
}

function readSettingsToJSON() {
	var rs = readSettings();
	if (rs == null) {
		return null;	
	}
	return JSON.parse(b64DecodeUnicode(rs));
}

function applyTheme(themeCode) {
	console.log("[nTube: nTheming] Loading CSS for this page...");
	send_request("/api/get_css?eurl=" + themeCode, "", function () {
		console.error("[nTube: nTheming] Failed to load CSS!");
	}, function (data) {
		document.getElementById("__ntheming_global").innerHTML = data;
	});
}

function applyFont(fontCode) {
	console.log("[nTube: nTheming] Loading font for this page...");
	send_request("/api/get_font?eurl=" + fontCode, "", function () {
		console.error("[nTube: nTheming] Failed to load font!");
	}, function (data) {
		document.getElementById("__ntheming_global_font").innerHTML = data;
	});
}
	
	function canDoAV1() {
		if (typeof MediaSource != "function") {
			return false;	
		}
		return MediaSource.isTypeSupported("video/mp4; codecs=\"av1\"") || MediaSource.isTypeSupported("video/webm; codecs=\"av1\"") || MediaSource.isTypeSupported('video/mp4; codecs=\"av01.0.04M.08\"');
	}
	</script>
	<script type="text/javascript" >
	document.getElementById("_checkjs").innerHTML = "YES";
	document.getElementById("_checkjs").style.color = "green";
	String.prototype.replaceAll = function(searchStr, replaceStr) {
		var str = this;

    	// no match exists in string?
    	if(str.indexOf(searchStr) === -1) {
        	// return string
        	return str;
    	}

    	// replace and remove first match, and do another recursirve search/replace
    	return (str.replace(searchStr, replaceStr)).replaceAll(searchStr, replaceStr);
	}
	String.prototype.contains = function(str) {
		return this.indexOf(str) > -1;
	}
	var settings = readSettingsToJSON();
	if (settings != null && settings.theme) {
		applyTheme(settings.theme);
	}
	if (settings != null && settings.font) {
		applyFont(settings.font);
	}
	if (typeof fetch != "undefined" || window.XMLHttpRequest || typeof ActiveXObject != "undefined") {
		document.getElementById("_checkwebr").innerHTML = "YES";
		document.getElementById("_checkwebr").style.color = "green";
	}
	if (!navigator.userAgent.toString().contains("Mobi")) {
		document.getElementById("_checknplayer").innerHTML = "YES";
		document.getElementById("_checknplayer").style.color = "green";
	}
	if (MediaSource.isTypeSupported("video/mp4") || MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
		document.getElementById("_check_media_mp4").innerHTML = "YES";
		document.getElementById("_check_media_mp4").style.color = "green";
	}
	if (MediaSource.isTypeSupported("video/webm") || 
		(MediaSource.isTypeSupported('video/webm;codecs="vp8,vorbis"') && MediaSource.isTypeSupported('video/webm;codecs="vp9,vorbis"'))) {
		document.getElementById("_check_media_webm").innerHTML = "YES";
		document.getElementById("_check_media_webm").style.color = "green";
	}
	if (canDoAV1()) {
		document.getElementById("_check_media_av1").innerHTML = "YES";
		document.getElementById("_check_media_av1").style.color = "green";
	}
	if (nPlayerUtils) {
		if (nPlayerUtils.backgroundPlaybackSupported()) {
			document.getElementById("_check_player_back").innerHTML = "YES";
			document.getElementById("_check_player_back").style.color = "green";
		}
		if (nPlayerUtils.supportsNativeSync()) {
			document.getElementById("_check_player_mediacontroller").innerHTML = "YES";
			document.getElementById("_check_player_mediacontroller").style.color = "green";
		}
	}
	</script>
</body>
</html>
